<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-hello></my-hello>
    </div>

    <template id="hello">
        <div>
            <h3>我是父组件</h3>
            <p>访问自己的数据：{{msg}},{{name}},{{age}},{{user}}</p>
            <p>访问子组件的数据：{{sex}},{{height}}</p>
            <hr>

            <!-- 监听子组件触发的自定义事件 -->
            <my-world :message="msg" :age="age" :user="user" @e-world="getData" @update:height="updateHeight"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h4>我是子组件</h4>
            <p>访问自己的数据：{{sex}},{{height}}</p>
            <p>访问父组件的数据：{{message}},{{name}},{{age}},{{user}}</p></p>
            <button @click="sendData">触发自定义事件，向父组件传递数据</button>
        </div>
    </template>
</body>
<script>
    new Vue({ // 根Root组件
        el:'#app',
        components:{
            'my-hello':{ // 父组件
                template:'#hello',
                data(){
                    return {
                        msg:'welcome',
                        name:'tom',
                        age:20,
                        user:{
                            id:101,
                            username:'admin',
                            password:'123456'
                        },
                        sex:null,
                        height:null
                    }
                },
                methods: {
                    getData(sex,height){
                        this.sex = sex
                        this.height = height
                    },
                    updateHeight(height){
                        this.height = height
                    }
                },
                components:{
                    'my-world':{ // 子组件
                        template:'#world',
                        data(){
                            return {
                                sex:'男',
                                height:180.3
                            }
                        },
                        // props:['message','name','age','user'] // 接收父组件传递的数据
                        props:{
                            message:String,
                            name:{
                                type:String,
                                default:'zhangsan'
                            },
                            age:Number,
                            user:{
                                type:Object,
                                default(){
                                    return {
                                        id:102,
                                        username:'zhangsan',
                                        password:'123456'
                                    }
                                }
                            }
                        },
                        methods:{
                            sendData(){
                                // 触发自定义事件，向父组件传递数据
                                this.$emit('e-world',this.sex,this.height)
                            }
                        },
                        created() {
                            // 触发自定义事件，向父组件传递数据
                            this.$emit('e-world',this.sex,this.height)
                        },
                        watch:{
                            height:function(newValue){
                                this.$emit('update:height',newValue)
                            }
                        }
                    }
                }
            },
        }
    })
</script>
</html>